import React from "react";
import "./banner.less";
import { Carousel, Button, WhiteSpace, WingBlank } from "antd-mobile";
import {MyContext} from "../../Index"
function Banner(props) {
  console.log(props);
  let {type}=props
  console.log(type);
  return (
    <div className="banner">
      <Button type="primary">{props.but}</Button>
      <span className="newpre">{props.sp1}</span>
      <span className="newpre">{props.sp2}</span>
      <WingBlank>
        <Carousel className="space-carousel"
          frameOverflow="visible"
          cellSpacing={10}
          slideWidth={0.34} 
          dots={false}
          autoplay
          infinite    
        >
          {props.banner.map((item, index) => (
            <a key={item.id} onClick={()=>{props.history.push("/detail/"+item.id+"/2")}}>
              <img
                src={item.img}               
              />
              <span className="price">价格:{item.price}</span>
            </a>
          ))}
        </Carousel>
      </WingBlank>

    </div>
  );
}

export default React.memo(Banner)